<template>
	<view class="demo">
		<!-- 海报 -->
		<u-mask :show="show">
			<view class="warp">
				<canvas v-if="stat" class="canvas" canvas-id="myCanvas"></canvas>
			</view>
			<view class="botPos ">
				<view class="f f-j-e p-t-20">
					<button @click="btn1" class="f f-a-c f-d-c f-j-c" :plain="true">
						<view class="weChat f f-a-c f-d-c f-j-c">
							<image src="/static/scher/wecat.png" class="weCath" mode=""></image>
							<view class="weiName">
								微信好友
							</view>
						</view>
					</button>
					<button @click="btn2" class="f f-a-c f-d-c f-j-c" :plain="true">
						<view class="friends  f f-a-c f-d-c f-j-c">
							<image src="/static/scher/3.png" class="weCath" mode=""></image>
							<view class="weiName">
								朋友圈
							</view>
						</view>
					</button>
					<button @click="btn3" class="f f-a-c f-d-c f-j-c" :plain="true">
						<view class="album f f-a-c f-d-c f-j-c">
							<image src="/static/scher/load.png" class="weCath" mode=""></image>
							<view class="weiName">
								保存到相册
							</view>
						</view>
					</button>
				</view>
				<view class="xian"></view>
				<view @click="clone" class="off">
					关闭
				</view>
			</view>
		</u-mask>
		<u-mask :show="shows" @click="shows = false">
			<view class="backDian b-f f f-a-c f-j-c">
				点击 <image src="/static/dian.png" class="dian m-l-20 m-r-20" mode=""></image> 进行分享
			</view>
		</u-mask>
	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				url: 'https://up-z2.qiniup.com',
				url: uni.getStorageSync('upload_domain'),
				token: uni.getStorageSync('upload_token'),
				domain: uni.getStorageSync('domain'),
				stat: true,
				shows: false,
				show: true,
				img: '/static/scher/1.png',
				imgAva: uni.getStorageSync('userinfo').avatar,
				posterImage: '',
				imgUrl: '',
				name: uni.getStorageSync('userinfo').nickname,
				bg: '/static/scher/10.png',
				avatar: ''
			}
		},
		onLoad() {

		},
		onShareAppMessage() {

		},
		onShareTimeline() {

		},
		mounted() {
			this.init()
		},
		methods: {
			clone() {
				// this.show = false
				this.stat = false
				this.$emit('cloneR')
			},
			randomString() {
				let str = 'ABCDEFGHIJKIMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
				let num = '';
				for (let i = 0; i < 16; i++) {
					num += str.charAt(Math.floor(Math.random() * str.length));
				}
				console.log(num, '000000000000');
				return num;
			},
			// 点击分享
			btn1() {
				console.log(this.posterImage, '888888888888888888888888888');
				uni.uploadFile({
					url: uni.getStorageSync('upload_domain'), // 上传地址
					filePath: this.posterImage, // 要上传的文件路径
					name: 'file', // 上传文件对应的 key 值
					method: 'POST',
					formData: {
						key: `${this.$u.timeFormat(new Date(), 'yyyy-mm-dd')}/${this.randomString()}.png`,
						token: uni.getStorageSync('upload_token'),
					},
					success: (uploadRes) => {
						// 上传成功处理逻辑
						// this.$msg('上传成功')
						let url = JSON.parse(uploadRes.data).key
						this.avatar = uni.getStorageSync('domain') + '/' + url
						console.log(this.avatar, '000000000000000000000000');
						wx.downloadFile({
							url: this.avatar,
							success: (res) => {
								// this.show = false
								// this.shows = false
								wx.showShareImageMenu({
									path: res.tempFilePath,
									success: res => {
										// this.show = false
										// this.show = true
										this.stat = false
										this.stat = true
										console.log(res, '4444444');
										this.$msg('分享成功')
									},
									fail: res => {
										// this.show = false
										// this.show = true
										this.stat = false
										this.stat = true
										this.$msg('分享失败')
										console.log(res, '555555');
									}
								})
							},
							fail: res => {
								console.log(res, '111111111111111111111111');
							}
						})
					},
					fail: function(error) {
						// 上传失败处理逻辑
						console.log(error, '111111111111111');
						this.$msg('上传失败')
					},
					complete: function() {}
				});
			},
			// 点击分享朋友圈
			btn2() {
				this.show = false
				this.shows = true
			},
			// /保存到图片
			btn3() {
				uni.saveImageToPhotosAlbum({
					filePath: this.posterImage,
					success: () => {
						this.clone();
						uni.showToast({
							position: "center",
							icon: "none",
							title: "图片保存成功，请到手机相册查看"
						})

					},
					fail(e) {
						uni.showModal({
							content: "保存相册失败，errCode：" + e.errCode + "，errMsg：" + e.errMsg +
								"，errSubject：" + e.errSubject,
							showCancel: false
						});
					}
				})
			},
			async init() {
				let n = await this.$api.Qrcode()
				this.imgUrl = n.data.url
				this.imgAva = uni.getStorageSync('userinfo').avatar
				let ctx = uni.createCanvasContext('myCanvas', this);
				let loadedImages = 0;
				const images = [
					'https://qiniu.jnsyst.com/2023-12-22/8X4OaW5C3CvnEPDu.png',
					'https://qiniu.jnsyst.com/2023-12-22/0yduQoBKKu7eQRZ8.png',
					this.imgAva,
					this.imgUrl
				];
				console.log(this.imgAva, this.imgUrl, '7777777777');

				images.forEach((imageUrl, index) => {
					uni.getImageInfo({
						src: imageUrl,
						success: (res) => {
							const imgPath = res.path;
							if (index == 0) {
								ctx.drawImage(imgPath, 0, 0, 250, 400)
							} else if (index == 1) {
								ctx.drawImage(imgPath, 10, 10, 230, 300)
							} else if (index == 2) {
								ctx.drawImage(imgPath, 10, 330, 48, 48)
							} else {
								ctx.setFontSize(18)
								ctx.fillText(this.name, 70, 360)
								ctx.drawImage(imgPath, 175, 325, 60, 60)
							}
							loadedImages++;
							if (loadedImages === images.length) {
								ctx.draw();
							}
						}
					});
				});
				// ctx.drawImage(this.bg, 0, 0, 250, 400)
				// ctx.drawImage(this.img, 10, 10, 230, 300)
				// // ctx.draw()
				// // ctx.clearRect(10, 10, 150, 75)
				// ctx.drawImage(this.imgAva, 10, 330, 48, 48)
				// ctx.drawImage(this.imgUrl, 175, 325, 60, 60)

				// ctx.draw()
				setTimeout(() => {
					// 将canvas转换成图片
					uni.canvasToTempFilePath({
						x: 0,
						y: 0,
						canvasId: 'myCanvas',
						fileType: 'png',
						quality: 1,
						success: (success) => {
							this.posterImage = success.tempFilePath
							uni.setStorageSync('posterImage', this.posterImage)
							uni.hideLoading()
						},
						fail: (e) => {
							uni.showToast({
								title: '海报生成失败',
								icon: 'none'
							})
							this.close()
							console.log('eeee', e)
						}
					}, this)
				}, 500)

			},
		},
	}
</script>
<style lang="scss" scoped>
	.backDian {
		position: absolute;
		top: 180rpx;
		right: 30rpx;
		width: 276rpx;
		height: 70rpx;
		background: #ffffff;
		border-radius: 12rpx;

		// margin-top: 100rpx;
		.dian {
			width: 38rpx;
			height: 12rpx;
		}
	}

	button {
		padding: 0;
		margin: 0;
		border: none;
	}

	.off {
		width: 100%;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: center;
		color: #999999;
		margin-top: 15rpx;
	}

	.botPos {
		position: absolute;
		width: 100%;
		height: 400rpx;
		background-color: #f6f6f6;
		bottom: 0;
		left: 0;
		border-radius: 40rpx;
		// padding: 20rpx;
		align-items: baseline;

		.xian {
			height: 2rpx;
			width: 100%;
			background-color: #e6e6e6;
			margin: 20rpx 0;
		}

		.weiName {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: center;
			color: #333333;
			margin-top: -10rpx;
		}

		.weCath {
			width: 86rpx;
			height: 86rpx;
		}

	}

	.demo {
		overflow-y: auto;
	}

	.canvas {
		width: 250px;
		height: 400px;
		// background-color: #fff;
	}

	.warp {
		position: absolute;
		// width: 250px;
		// height: 400px;
		// background-color: #fff;
		left: 55%;
		top: 20%;
		transform: translateX(-50%);
	}
</style>